<template>
  <!-- 数据列表 -->
  <div class="data_wrap">
    <!-- 搜索 -->
    <div class="search">
      <span v-if="!canReport">公司名称：</span>
      <el-select
        v-if="!canReport"
        v-model="queryParam.comName"
        style="width:154px;margin-right:20px;height:36px;padding: 0;"
      >
        <el-option
          v-for="item in comOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <span>报告名称：</span>
      <el-input
        v-model="queryParam.reportName"
        placeholder="请输入报告名称"
        style="width:154px;margin-right:20px;height:36px;padding: 0;"
      ></el-input>

      <span class="demonstration">上传时间：</span>
      <el-date-picker
        placeholder="开始日期"
        style="width:154px;margin-right:12px"
        v-model="queryParam.upTimeStart"
        :clearable="false"
      ></el-date-picker>至
      <el-date-picker
        placeholder="结束日期"
        style="width:154px;margin-left:12px"
        v-model="queryParam.upTimeEnd"
        :clearable="false"
      ></el-date-picker>

      <el-button
        type="primary"
        @click="select()"
        style="width:52px;margin-left: 20px;padding: 0px;height:36px"
      >查询</el-button>
      <el-button
        style="width:52px;margin-left: 12px;padding:0px;height:36px"
        @click="resetQueryParam"
      >重置</el-button>
      <el-button
        type="primary"
        icon="el-icon-plus"
        v-if="canReport"
        @click="createReport()"
        style="width:80px;margin-left: 12px;padding:0px;height:36px;float:right;"
      >创建</el-button>
    </div>
    <!-- 表格 -->
    <div class="table_data">
      <el-table
        v-loading="loading"
        id="tableClass"
        :border="border"
        :data="tableData"
        style="width: 100%"
        height="610"
        :header-cell-style="{color:'#000000',backgroundColor:'#E8E8E8',padding:'0px'}"
        :header-row-style="{height:'46px'}"
        :row-style="{height:'50px'}"
        :cell-style="{padding:'0px'}"
      >
        <el-table-column
          type="index"
          min-width="50"
          width="60"
          label="序号"
          align="center"
          :resizable="false"
        ></el-table-column>
        <el-table-column
          prop="company"
          label="公司名称"
          min-width="580"
          width="580"
          align="center"
          v-if="!canReport"
          :resizable="false"
        ></el-table-column>
        <el-table-column
          prop="reportName"
          label="报告名称"
          min-width="400"
          align="center"
          :resizable="false"
        ></el-table-column>
        <el-table-column
          prop="upTime"
          label="上传时间"
          min-width="220"
          width="220"
          align="center"
          :resizable="false"
        ></el-table-column>

        <el-table-column prop="change" label="操作" min-width="280" width="280" align="center">
          <el-button
            style="width: 60px;line-height: 28px;margin-right: 20px;padding: 0;"
            @click="createReport()"
          >预览</el-button>
          <el-button
            type="primary"
            style="width: 60px;line-height: 28px;margin-right: 20px;padding: 0;"
          >下载</el-button>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination_wrap">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-sizes="[10, 30, 50]"
        layout="total,  prev, pager, next, sizes,jumper"
        :total="100"
        style="font-weight:400;padding-right:20px"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import Pagination from "@/components/Popup/Pagination"; // 分页
export default {
  components: {
    Pagination,
  },
  data() {
    return {
      border: true, // 是否有边框
      loading: true,
      canReport: true,
      queryParam: {
        reportName: "",
        comName: "",
        upTimeStart: "",
        upTimeEnd: "",
        pageNum: 1,
        pageSize: 10,
        total: "20",
      },
      comOptions: [
        {
          value: "0",
          label: "全部",
        },
        {
          value: "1",
          label: "开拓热力",
        },
        {
          value: "2",
          label: "经开股份",
        },
      ],
      expendituresOptions: [
        {
          value: "0",
          label: "全部",
        },
        {
          value: "1",
          label: "汽车使用费",
        },
        {
          value: "2",
          label: "差旅费",
        },
        {
          value: "3",
          label: "办公费",
        },
        {
          value: "4",
          label: "误餐费",
        },
        {
          value: "5",
          label: "职工教育经费",
        },
        {
          value: "6",
          label: "业务招待费",
        },
        {
          value: "7",
          label: "工会经费",
        },
        {
          value: "8",
          label: "企业文化建设费",
        },
        {
          value: "9",
          label: "维护维修费",
        },
      ],
      value: "",
      value1: "",
      tableData: [
        {
          id: "1",
          company: "开拓热力",
          reportName: "汽车使用费",
          upTime: "2019-10-10 12:10:30",
        },
        {
          id: "2",
          company: "经开股份",
          reportName: "差旅费",
          upTime: "2019-10-10 12:10:30",
        },
        {
          id: "2",
          company: "经开股份",
          reportName: "维护维修费",
          upTime: "2019-10-10 12:10:30",
        },
        {
          id: "2",
          company: "经开股份",
          reportName: "工会经费",
          upTime: "2019-10-10 12:10:30",
        },
        {
          id: "2",
          company: "经开股份",
          reportName: "工会经费",
          upTime: "2019-10-10 12:10:30",
        },
        {
          id: "2",
          company: "经开股份",
          reportName: "职工教育经费",
          upTime: "2019-10-10 12:10:30",
        },
        {
          id: "2",
          company: "经开股份",
          reportName: "职工教育经费",
          upTime: "2019-10-10 12:10:30",
        },
        {
          id: "2",
          company: "经开股份",
          reportName: "职工教育经费",
          upTime: "2019-10-10 12:10:30",
        },
        {
          id: "2",
          company: "经开股份",
          reportName: "业务招待费",
          upTime: "2019-10-10 12:10:30",
        },
        {
          id: "2",
          company: "经开股份",
          reportName: "业务招待费",
          upTime: "2019-10-10 12:10:30",
        },
        {
          id: "2",
          company: "经开股份",
          reportName: "业务招待费",
          upTime: "2019-10-10 12:10:30",
        },
        {
          id: "2",
          company: "经开股份",
          reportName: "业务招待费",
          upTime: "2019-10-10 12:10:30",
        },
        {
          id: "2",
          company: "经开股份",
          reportName: "业务招待费",
          upTime: "2019-10-10 12:10:30",
        },
        {
          id: "2",
          company: "经开股份",
          reportName: "业务招待费",
          upTime: "2019-10-10 12:10:30",
        },
      ],
    };
  },
  created() {
    setTimeout(() => {
      this.loading = false;
    }, 500);
  },
  mounted() {
    // 修改分页器 中 '前往' -> '跳转至'
    document.getElementsByClassName(
      "el-pagination__jump"
    )[0].childNodes[0].nodeValue = "跳转至 ";
  },
  methods: {
    select() {},
    handleSizeChange() {},
    handleCurrentChange() {},
    currentPage1() {},
    createReport() {
      this.$router.push({ name: "CreateInstructions" });
    },
    resetQueryParam() {
      Object.assign(this.$data.queryParam, this.$options.data().queryParam);
    },
  },
};
</script>
<style lang="less" scoped>
.data_wrap {
  height: 726px;
  position: relative;
  // flex: 1;
  // 搜索
  .search {
    margin-bottom: 20px;
    width: 100%;
    min-width: 1080px;
    /deep/ .el-input__inner {
      height: 36px;
    }
    /deep/.el-icon-date
    {
      line-height: 36px;
      position: absolute;
		  left: 120px;
    }
    /deep/.el-icon-arrow-up{
      line-height: 36px;
    }
  }
  /**.table_data {
    height: 610px;
    overflow-y: scroll;
    overflow-x: hidden;
    &::-webkit-scrollbar {
      display: none;
    }
  }*/
  // 下拉框样式
  .pagination_wrap {
    display: flex;
    justify-content: flex-end;
    position: absolute;
    bottom: 0;
    right: 0;
  }
}
</style>